<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="${ctx}/css/home.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/assets/laydate/laydate.js"></script>
<title>系统首页</title>
<style>
.ue-clear{display:flex;}
#ue-clear{display:flex;justify-content:space-between;text-align:center;}
.ue-clear span{display:block;width:20%;text-align:center;}
.li-active span,.li-active div{color:red!important;}
.divflex{
  display:flex;
}
.divflex>a{
  display:block;
  width:25px;
  height:25px;
  border-radius:50%;
  margin-left:275px;
  background: url(../imgs/tj.png) no-repeat left center;
  margin-top:5px;
  background-size:100%
}
.content{overflow: auto;}
#add:hover{
  background:url(../imgs/tj1.png) no-repeat left center;
  background-size:100%;
}
</style>
</head>
<body>
<div class="article toolbar">
		<div class="title ue-clear">
	    	<h2>常用工具</h2>
	        <a href="javascript:;" class="more"></a>
	    </div>
	    <div class="content">
	    	<ul class="toollist ue-clear">
	    		<li>
	            	<a href="${ctx}/affiche/afficheList.do" class="img"><img src="${ctx}/images/icon01.png" /></a>
	                <p><a href="${ctx}/affiche/afficheList.do">通知公告</a></p>
	            </li>
	            <li>
	            	<a href="${ctx}/shift/wenkuList.do" class="img"><img src="${ctx}/images/icon02.png" /></a>
	                <p><a href="javascript:;">文库</a></p>
	            </li>
	            <li>
	            	<a href="${ctx}/employee/mimaupdate.do" class="img" ><img src="${ctx}/images/icon03.png"/></a>
	                <p><a href="javascript:;">密码修改</a></p>
	            </li>
	    	</ul>
	        
	    </div>
	</div>
	<div class="article half notice" style="margin-top: 9px;">
		<div class="wrap-l">
	        <div class="title ue-clear">
	            <h2>通知公告</h2>
	        </div>
	        <div class="content" style="overflow: auto;">
	        	    <ul class="notice-list">
	        	    <li class="ue-clear" id="ue-clear">
	                	<span class="notice-title">公告名</span>
	                    <div class="notice-time">公告时间</div>
		            </li>
	        	    <c:if test="${affiche != null }">
		        	     <c:forEach items="${affiche }" var="aff">
		        	        <li class="ue-clear tonggao" id="ue-clear" value="${aff.afficheId }" data="${aff.afficheTitle }">
			                	<span class="notice-title">${aff.afficheTitle }</span>
			                    <div class="notice-time" ><fmt:formatDate value="${aff.afficheDate }" type='date' pattern='yyyy-MM-dd'/></div>
		                    </li>
		        	    </c:forEach>
		        	</c:if>
	            </ul>
	        </div>
	    </div>
	</div>
	<div class="article half matter">
		<div class="wrap-r" style="margin-top:3px">
	        <div class="title ue-clear">
	            <h2 class="title-list">
	                <ul class="ue-clear">
	                    <li class="current"><a href="javascript:;">库存提醒</a></li>
	                    <li><a href="javascript:;">过期提醒</a></li>
	                </ul>
	            </h2>
	           <a href="javascript:;" class="more" style="color:#E5F0F8">更多</a>
	        </div>
	        <div class="content">
	        	<div class="matter-content current ue-clear">
	            	<div class="today" >
	                	<p class="year">
		                	<SCRIPT>  
		                    var d = new Date();
		                    document.write(d.getFullYear() + "年" +(d.getMonth() + 1) + "月" );  
		                    </SCRIPT>
	                    </p>
	                    <p class="date">
		                    <SCRIPT>  
		                    var d = new Date();  
		                    document.write(d.getDate());  
	                    </SCRIPT></p>
	                </div>
	                <div style="overflow: auto;">
	                    <ul class="matter-list">
	                    <li class="ue-clear">
	                        <span class="matter-time" style="width:40%;">物品编号</span>
	                    	<span>物品名</span>
	                        <span>剩余数量</span>
	                        <span>物品种类</span>
	                    </li>
	                    <c:if test="${ycpwarn != null }">
	                        <c:forEach items="${ycpwarn }" var="ycpkc">
	                            <li class="ue-clear">
	                    	        <span class="matter-time" style="width:40%">${ycpkc.tiaoma }</span>
	                                <span>${ycpkc.productName }</span>
	                                <span>${ycpkc.shengyuNum }</span>
	                                <span>
	                                    <c:if test="${ycpkc.leibie == 2 }">一次品</c:if>
	                                    <c:if test="${ycpkc.leibie == 1 }">包</c:if>
	                                </span>
	                            </li>
	                        </c:forEach>
	                    </c:if>
	                    </ul>
	                </div>
	            </div>
	            <div class="matter-content ue-clear">
	            	<div class="today" >
	                	<p class="year">
		                	<SCRIPT>  
		                    var d = new Date();  
		                    document.write(d.getFullYear() + "年" +(d.getMonth() + 1) + "月" );  
		                    </SCRIPT>
	                    </p>
	                    <p class="date">
		                    <SCRIPT>  
		                    var d = new Date();  
		                    document.write(d.getDate());  
		                    </SCRIPT>
	                    </p>
	                </div>
	                <div style="overflow: auto;">
	                    <ul class="matter-list">
	                    <li class="ue-clear">
                    	    <span class="matter-time" style="width:25%;">物品条码</span>
                            <span style="width:15%;">物品名称</span>
                            <span style="width:30%;">入库日期</span>
                            <span style="width:30%;">失效日期</span>
                        </li>
	                    <c:if test="${gqb != null }">
	                        <c:forEach items="${gqb }" var="guoqi">
	                            <li class="ue-clear">
		                    	    <span class="matter-time" style="width:25%;">${guoqi.packTiaoma }</span>
		                            <span style="width:15%;">${guoqi.packageName }</span>
		                            <span style="width:30%;"><fmt:formatDate value="${guoqi.rukuDate}" type="date" pattern="yyyy-MM-dd HH:mm:ss" /></span>
		                            <span style="width:30%;"><fmt:formatDate value="${guoqi.invalidDate}" type="date" pattern="yyyy-MM-dd HH:mm:ss" /></span>
	                            </li>
	                        </c:forEach>
	                    </c:if>
	                    </ul>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div class="article half duty">
		<div class="wrap-l">
	        <div class="title ue-clear">
	            <h2>排班</h2>
	        </div>
	        <div class="content paiban" style="overflow: auto;">
	                <%-- <iframe id="tupian" src="${ctx }${aff.afficheAdd }" style="width: 655px;height:190px;"></iframe> --%>
	        	<table>
	            	<thead>
	                	<tr>
	                	    <th>标题</th>
	                    	<th class="date" style="width: 20%;">日期</th>
	                        <!-- <th class="week">星期</th>
	                        <th class="leader">值班领导</th>
	                        <th class="contact">联系方式</th>
	                        <th class="remark">备注</th> -->
	                    </tr>
	                </thead>
	                <tbody>
	                    <c:if test="${aff != null }">
	                        <c:forEach items="${aff }" var="affiche">
	                            <tr data="${affiche.afficheAdd }">
			                    	<td class=>${affiche.afficheTitle }</td>
			                        <td class="date" style="width: 20%;"><fmt:formatDate value="${affiche.afficheDate}" type="date" pattern="yyyy-MM-dd"/></td>
			                        <!-- <td class="leader">刘秀全</td>
			                        <td class="contact">139039409876</td>
			                        <td class="remark"></td> -->
			                    </tr>
	                        </c:forEach>
	                    </c:if>
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>
	
	<div class="article half email">
		<div class="wrap-r">
	        <div class="title ue-clear divflex">
	            <h2>投诉与建议</h2>
	            <a href="javascript:;" id="add"></a>
	        </div>
	        <div class="content">
	        	<table id="advice">
	            	<thead>
	                	<tr>
	                        <th class="sender">主题</th>
	                        <th class="subject">内容</th>
	                        <th class="time last-item">时间</th>
	                    </tr>
	                </thead>
	                <tbody>
	                    <c:if test="${adviceList != null }">
	                        <c:forEach items="${adviceList }" var="advice">
	                            <tr data="${advice.adviceId }">
			                        <td class="sender" data="${advice.adviceTitle }"><div class="td-wrap"><div style="text-overflow: ellipsis;width:100px; white-space: nowrap; overflow: hidden;">${advice.adviceTitle }</div></div></td>
			                        <td class="subject"><div class="td-wrap"><div style="text-overflow: ellipsis;width:200px; white-space: nowrap; overflow: hidden;"><a>${advice.adviceContent }</a></div></div></td>
			                        <td class="time"><div class="td-wrap"><fmt:formatDate value="${advice.adviceTime}" type="date" pattern="yyyy-MM-dd"/></div></td>
	                    		</tr>
	                        </c:forEach>
	                    </c:if>
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>
</body>

<script type="text/javascript">

$(function(){
	$(".tonggao").click(function(){
		$(this).addClass("li-active").siblings().removeClass("li-active");
		var id=$(this).val();
        var name = $(this).attr("data");
        layer.open({
			  type: 2,
			  title: '通知公告:'+name,
			  maxmin: true,
			  shadeClose: true, //点击遮罩关闭层
			  area : ['800px' , '520px'],
			  content: '${ctx}/affiche/findOne.do?id='+id
		});
    });
	
	$(".paiban tbody tr").click(function(){
		$(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");
		var lujing = $(this).attr("data");
		var shijian = $(this).children('td').eq(1).html();
		console.log(lujing);
		layer.open({
			  type: 2,
			  title: shijian+"排班",
			  maxmin: true,
			  shadeClose: true, //点击遮罩关闭层
			  area : ['800px' , '520px'],
			  content: '${ctx}' + lujing
		});
	});
	$("#advice tbody tr").click(function(){
		var id= $(this).attr("data");
		var name = $(this).find("td").eq(0).attr("data");
		layer.open({
			  type: 2,
			  title: name,
			  maxmin: true,
			  shadeClose: true, //点击遮罩关闭层
			  area : ['800px' , '520px'],
			  content: '${ctx}/advice/findOne.do?id='+id
		});
	});
	$("#add").click(function(){
		window.location.href="${ctx}/advice/adviceAdd.do";
	});
});
$(".title-list ul").on("click","li",function(){
	var aIndex = $(this).index();
	$(this).addClass("current").siblings().removeClass("current");
	$(".matter-content").removeClass("current").eq(aIndex).addClass("current");
});
$(".duty").find("tbody").find("tr:even").css("backgroundColor","#eff6fa");
</script>
</html>
